<script>
import { defineComponent, computed, ref, watch } from 'vue';
import { createNamespace, transformStyleSize, transformSize } from '../utils';
import FanIcon from '../icon/icon.vue';
import FanButton from '../button/button.vue';
import FanInput from '../input/input.vue';

export default defineComponent({
  name: createNamespace('Search')[0],
  options: {
    // https://uniapp.dcloud.io/matter.html#mp
    virtualHost: true,
  },
  components: { FanIcon, FanButton, FanInput },
  emits: ['blur', 'focus', 'click', 'search', 'input', 'update:modelValue'],
  props: {
    modelValue: {
      type: String,
      default: '',
    },
    placeholder: String,
    prefixIcon: Boolean,
    readonly: {
      type: Boolean,
      default: false,
    },
    bg: String,
    autofocus: Boolean,
    radius: {
      type: String,
      default: '20px',
    },
    icon: String,
    iconStyle: [String, Object],
    innerStyle: String,
    btnStyle: [String, Object],
  },
  setup(props, { emit }) {
    const inputBoxStyle = computed(() => {
      const { bg, radius, innerStyle } = props;
      let style = '';
      if (bg) style += `background-color:${bg};`;
      if (radius) style += `border-radius:${transformSize(radius)};`;
      return transformStyleSize(style) + transformStyleSize(innerStyle);
    });

    const innerValue = ref(props.modelValue);
    watch(innerValue, (val) => {
      if (val !== props.modelValue) {
        emit('update:modelValue', innerValue.value);
        emit('input', val);
      }
    });
    watch(
      () => props.modelValue,
      (val) => {
        if (val !== innerValue.value) innerValue.value = val;
      },
    );

    const onBlur = (e) => emit('blur', e);
    const onFocus = (e) => emit('focus', e);
    const onInput = (val) => emit('input', val);
    const onConfirm = (val) => emit('search', val);
    const onClick = (e) => emit('click', e);

    return {
      inputBoxStyle,
      innerValue,
      onBlur,
      onFocus,
      onInput,
      onClick,
      onConfirm,
    };
  },
});
</script>

<template>
  <div class="fan-search">
    <div @click="onClick" class="fan-search__inner" :style="inputBoxStyle">
      <FanIcon v-if="prefixIcon" name="search" color="#999" :size="14" :style="{ marginRight: '3px' }" />
      <FanInput v-model="innerValue" class="fan-flex-1" :style="{ padding: '0 4px 0 0' }"
        :placeholder="placeholder || '搜一搜'" :readonly="readonly" :autofocus="autofocus" clearable @blur="onBlur"
        @focus="onFocus" @input="onInput" @confirm="onConfirm" />

      <FanIcon v-if="icon" :name="icon" :style="iconStyle" @click="onConfirm(innerValue)" />
      <FanButton v-else round :radius="radius" width="70px" height="100%" :style="btnStyle"
        @click="onConfirm(innerValue)">搜索</FanButton>
    </div>
  </div>
</template>

<style lang="less">
.fan-search {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.85);
  padding: 3.2% 3.2% 1.6%;
  box-sizing: border-box;

  &__inner {
    height: 32px;
    border-radius: 20px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 2px 2px 2px 4.2%;
    overflow: hidden;
  }

  &__input {
    display: inline-block;
    flex: 1;
    overflow: hidden;
    border: 0;
    height: 100%;
    margin-right: 3px;
    outline: none;
    font-size: inherit;
    background: transparent;
  }
}
</style>
